<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-09-23 20:07:07
-->
<template>
  <!-- 2.创建容器 容纳图表 -->
  <div ref="root" style="height: 150px"></div>
</template>
<script>
import { Radar } from "@antv/g2plot";

export default {
  data() {},
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const data = [
        { name: "test", star: "50" },
        { name: "language", star: "30" },
        { name: "government", star: "80" },
        {name: "technology", star: "50" },
        { name: "work", star: "40" },
        { name: "study", star: "20" },
        
      ];
      let radar = new Radar(this.$refs["root"], {data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
        xField: "name",
        yField: "star",
        appendPadding: [0, 10, 0, 10],
        meta: {
          star: {
            alias: "star 数量",
            min: 0,
            nice: true,
            formatter: (v) => Number(v).toFixed(2),
          },
        },
        xAxis: {
          tickLine: null,
        },
        yAxis: {
          label: false,
          grid: {
            alternateColor: "rgba(0, 0, 0, 0.04)",
          },
        },
        // 开启辅助点
        point: {
          size: 2,
        },
        area: {},
      });

      radar.render();
    },
  },
};
</script>
